<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页布局</title>
    <link rel="stylesheet" href="../../common/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/normal2.css">
    <script src="../../common/lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="../../common/lib/echarts/echarts.js"></script>
    <script src="js/normal.js"></script>
</head>
<body>
    <div class="container-fluid normal">
        <!--上方-->
        <div class="row normal-top">
            <div class="col-sm-2">
                <div class="normal-section">
                    <div class="normal-chart-top">
                        <section class="mainChart" id="guage1"></section>
                        <section class="mainChartTable">
                            <table  class="ratio_detail_table">
                                <tr>
                                    <td  align="center"><strong id="d_onlineNum_label">在线数</strong></td>
                                    <td  align="center"><strong id="d_offlineNum_label">离线数</strong></td>
                                </tr>
                                <tr>
                                    <td class="hover_hand green " align="center" onclick="d_detail_online()">
                                        <strong id="d_iOnlineNum">100</strong>
                                    </td>
                                    <td class="hover_hand red" align="center" onclick="d_detail_offline()">
                                        <strong id="d_iOfflineNum">200</strong>
                                    </td>
                                </tr>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="normal-section">
                    <div class="normal-chart-top">
                        <section class="mainChart" id="guage2"></section>
                        <section class="mainChartTable">
                            <table  class="ratio_detail_table">
                                <tr>
                                    <td  align="center"><strong id="d_onlineNum_label">在线数</strong></td>
                                    <td  align="center"><strong id="d_offlineNum_label">离线数</strong></td>
                                </tr>
                                <tr>
                                    <td class="hover_hand green " align="center" onclick="d_detail_online()">
                                        <strong id="d_iOnlineNum">100</strong>
                                    </td>
                                    <td class="hover_hand red" align="center" onclick="d_detail_offline()">
                                        <strong id="d_iOfflineNum">200</strong>
                                    </td>
                                </tr>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="normal-section">
                    <section class="mainChart" id="mainGauge"></section>
                    <section class="mainChartTable">
                        <table  class="ratio_detail_table">
                            <tr>
                                <td  align="center"><strong id="d_onlineNum_label">在线数</strong></td>
                                <td  align="center"><strong id="d_offlineNum_label">离线数</strong></td>
                            </tr>
                            <tr>
                                <td class="hover_hand green " align="center" onclick="d_detail_online()">
                                    <strong id="d_iOnlineNum">100</strong>
                                </td>
                                <td class="hover_hand red" align="center" onclick="d_detail_offline()">
                                    <strong id="d_iOfflineNum">200</strong>
                                </td>
                            </tr>
                        </table>
                    </section>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="normal-section">
                    <div class="normal-chart-top">
                        <section class="mainChart" id="guage3"></section>
                        <section class="mainChartTable">
                            <table  class="ratio_detail_table">
                                <tr>
                                    <td  align="center"><strong id="d_onlineNum_label">在线数</strong></td>
                                    <td  align="center"><strong id="d_offlineNum_label">离线数</strong></td>
                                </tr>
                                <tr>
                                    <td class="hover_hand green " align="center" onclick="d_detail_online()">
                                        <strong id="d_iOnlineNum">100</strong>
                                    </td>
                                    <td class="hover_hand red" align="center" onclick="d_detail_offline()">
                                        <strong id="d_iOfflineNum">200</strong>
                                    </td>
                                </tr>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="normal-section">
                    <div class="normal-chart-top">
                        <section class="mainChart" id="guage4"></section>
                        <section class="mainChartTable">
                            <table  class="ratio_detail_table">
                                <tr>
                                    <td  align="center"><strong id="d_onlineNum_label">在线数</strong></td>
                                    <td  align="center"><strong id="d_offlineNum_label">离线数</strong></td>
                                </tr>
                                <tr>
                                    <td class="hover_hand green " align="center" onclick="d_detail_online()">
                                        <strong id="d_iOnlineNum">100</strong>
                                    </td>
                                    <td class="hover_hand red" align="center" onclick="d_detail_offline()">
                                        <strong id="d_iOfflineNum">200</strong>
                                    </td>
                                </tr>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <!--下方-->
        <div class="row normal-bottom">
            <div class="col-sm-3">
                <div class="normal-section normal-border-style">
                    <section class="normal-title">
                        <h4>设备故障情况</h4>
                    </section>
                    <section class="normal-content">
                        <div id="faultChart"></div>
                    </section>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="normal-section normal-border-style">
                    <section class="normal-title">
                        <h4>预警工单</h4>
                    </section>
                    <section class="normal-content">
                        <table>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="normal-section normal-border-style">
                    <section class="normal-title">
                        <h4>已完成工单</h4>
                    </section>
                    <section class="normal-content">
                        <table>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="normal-section normal-border-style">
                    <section class="normal-title">
                        <h4>未完成工单</h4>
                    </section>
                    <section class="normal-content">
                        <table>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>设备XXX故障了,23小时,未维修</td>
                                <td>2012年3月1日</td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
        </div>
    </div>
</body>
</html>